<!--
 * @Author: wangming
 * @Date: 2021-04-08 10:57:13
 * @LastEditors: wangming
 * @LastEditTime: 2022-06-01 14:33:52
 * @Description:列表 table组件
-->
<template>
  <div class="p15 layoutbox mt10">
    <el-table
      :stripe="!!setting.stripe"
      :data="tableData"
      style="width: 100%"
      border
      @header-click="headerClick"
    >
      <slot name="expand"></slot>
      <!-- 序号 -->
      <el-table-column type="index" width="50" v-if="setting.indexStatus === 1">
      </el-table-column>
      <!-- 复选 -->
      <el-table-column
        type="selection"
        width="50"
        v-if="setting.selecteStatus > 0"
      >
      </el-table-column>
      <!-- 是否需要内嵌查询 -->
      <template v-if="setting.searchStatus === 1">
        <el-table-column
          :prop="i.code"
          v-for="(i, index) in columnList"
          :key="'header' + index"
        >
          <template slot="header" v-if="i.showSearch" slot-scope="scope">
            <el-input
              size="mini"
              placeholder="请输入"
              v-model="searchData[i.code]"
              @change="$emit('search')"
            />
          </template>
          <el-table-column
            :prop="i.code"
            :label-class-name="isActive('tb_im', i.code) ? 'header-active' : ''"
          >
            <template slot="header" slot-scope="scope">
              <span>{{ i.title }}</span>
              <el-tooltip v-if="i.showExplain" placement="top">
                <div
                  slot="content"
                  class="explain-content"
                  :style="{
                    'white-space': 'pre-line',
                  }"
                >
                  {{ i.explainValue }}
                </div>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table-column>
      </template>

      <template v-if="setting.searchStatus !== 1">
        <el-table-column
          :label-class-name="isActive('tb_im', i.code) ? 'header-active' : ''"
          v-for="(i, index) in columnList"
          :key="index + i.code"
          :prop="i.code"
          :fixed="i.fixed"
          :width="i.widthType === '1' ? null : i.width"
        >
          <template slot="header" slot-scope="scope">
            <span>{{ i.title }}</span>
            <el-tooltip v-if="i.showExplain" placement="top">
              <div
                slot="content"
                class="explain-content"
                :style="{
                  'white-space': 'pre-line',
                }"
              >
                {{ i.explainValue }}
              </div>
              <i class="el-icon-info"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </template>
      <!-- 操作 -->
      <el-table-column
        :fixed="setting.operate.fixed"
        :label="setting.operate.title"
        :width="setting.operate.width"
        :label-class-name="isActive('tb_o', '') ? 'header-active' : ''"
      >
        <template slot-scope="scope">
          <div v-if="!setting.operate.isRender">
            <hmButton
              :type="i.handler === 'custom' ? i.buttonType : i.handler"
              :key="i.composerKey"
              v-for="i in setting.operate.customBtn"
            >
              {{ i.label }}
            </hmButton>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import hmButton from "./button";
import { uuid } from "@/utils/common.js";
export default {
  components: { hmButton },
  computed: {
    columnList() {
      return this.column.filter((i) => i.showColumn);
    },
  },
  props: {
    searchData: { type: Object, default: () => ({}) },
    tableData: {
      type: Array,
      default: () => [],
    },
    column: {
      type: Array,
      default: () => [],
    },
    setting: {
      type: Object,
      default: () => ({}),
    },
    activeHeader: {
      type: String,
      default: "",
    },
    tablekey: {
      type: String,
      default: "",
    },
  },
  created() {
    //兼容老数据
    !!this.setting.operate.btnList &&
      this.setting.operate.btnList.forEach((item) => {
        const { label, formId, handler, show } = item;
        if (show) {
          // 加入custom按钮
          const composerKey =
            this.setting.operate.tagName + "_click_" + uuid(4);
          this.setting.operate.customBtn.unshift({
            label,
            handler,
            composerKey,
            relatinonFormId: formId,
          });
        }
      });
  },
  methods: {
    isActive(type, code) {
      return this.activeHeader === type + this.tablekey + code;
    },
    //点击表头
    headerClick({ property, label }, event) {
      if (!!property) {
        let form = this.columnList.find(({ code }) => code === property);
        this.$emit("header-click", { type: "tb_im", form });
      } else {
        this.$emit("header-click", {
          type: "tb_o",
          form: Object.assign({
            code: "tb_o",
          }),
        });
      }
      event.stopPropagation();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-icon-info {
  margin-left: 3px;
}
.explain-content {
  max-width: 400px;
}
</style>
